<template>
  <div class="MedDatedatetimePicker" v-if="dataState">
    <div class="MedDatedatetimePickerBG" @click="cancelBGClick"></div>
    <div class="MedDatedatetimePickerTime">
      <mt-datetime-picker @cancel="cancelClick" @confirm="confirmClick" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        ref="pickerdate" type="date" v-model="dataVal" :startDate="startDate">
      </mt-datetime-picker>
    </div>
  </div>
</template>
<script>
export default {
  // 年月日
  props: ["dataState", "time", "startDate"],
  data() {
    return {
      dataTrue: false,
      dataVal: ""
    };
  },
  created: function() {
    this.dataVal = new Date();
  },
  mounted: function() {},
  watch: {
    dataState: function(val) {
      this.dataTrue = val;
      this.$nextTick(function() {
        if (this.dataTrue == false) {
        } else {
          this.$refs.pickerdate.open();
        }
      });
      if (this.time != "请选择") {
        this.dataVal = new Date(this.time);
      } else {
        this.dataVal = new Date();
      }
    },
    time: function(val) {
      if (val != "请选择") {
        this.dataVal = new Date(val);
      } else {
        this.dataVal = new Date();
      }
    }
  },
  methods: {
    cancelClick() {
      this.$emit("cancel", true);
    },
    cancelBGClick() {
      this.$emit("cancel", true);
    },
    confirmClick(index) {
      this.$emit("message", this.dataVal);
    }
  }
};
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(0.8rem);
  opacity: 0;
}

.MedDatedatetimePickerBG {
  min-height: calc(100vh - 7.8667rem) !important;
  width: 100%;
  z-index: 20005;
  overflow: hidden;
}

.MedDatedatetimePickerTime {
  width: 100%;
  height: 7.8667rem !important;
  overflow: hidden;
}

.MedDatedatetimePicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
}
</style>